<template>
  <div>
    <div v-if="!simpleMode" class="header">
      <a-icon-font class="icon" type="iconqiehuantufenxibeifen2" />
      <span>模型训练</span>
      <div class="divider"></div>
      <div class="tab">
        <span class="m-span">我的模型</span>
        <div class="bottom-line"></div>
      </div>
    </div>
    <div class="model-config" :class="simpleMode ? 'simpleMode' : 'normal'">
      <div v-if="!simpleMode" class="bg">
        <div class="navg-btns">
          <div class="return-btn" @click="backList">
            <a-icon type="left" />返回
          </div>
          <div class="divider2"></div>
          <a-breadcrumb class="bread">
            <span slot="separator">|</span>
            <a-breadcrumb-item v-if="breadType === 'create'"
              ><a :href="createUrl">创建模型</a></a-breadcrumb-item
            >
            <a-breadcrumb-item><a>训练配置</a></a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <a-divider style="margin: 0;"></a-divider>
        <div class="main-content space1">
          <a-spin :spinning="loading" size="large" tip="Loading...">
            <!--配置训练参数-->
            <div class="settings">
              <div class="m_title">
                <div class="divider"></div>
                <b>训练数据</b>
              </div>
              <div class="content">
                <b>{{ tableData.name }}</b>
                <a-row>
                  <a-col :span="4">大小：{{ tableData.size }}</a-col>
                  <a-col :span="4">行数：{{ tableData.count }}</a-col>
                  <a-col :span="4">格式：{{ tableData.type }}</a-col>
                  <a-col :span="4"
                    >创建时间：{{
                      tableData.createTime &&
                      tableData.createTime.replace(/T/, ' ')
                    }}</a-col
                  >
                </a-row>
                <br />
                <!-- <a-table
                  :columns="columns"
                  :data-source="souceData"
                  bordered
                  :pagination="false"
                  :scroll="{ x: minLength, y: 500 }"
                >
                </a-table> -->
                <div>
                  <dataset-preview-table
                    :head="heads"
                    :data="souceData"
                    height="500"
                    data-type="table"
                  />
                </div>
              </div>
              <div class="m_title">
                <div class="divider"></div>
                <b>训练参数</b>
              </div>
              <div class="content">
                <a-form
                  :form="dataFm"
                  :label-col="labelCol"
                  :wrapper-col="wrapperCol"
                  label-align="left"
                >
                  <a-form-item v-if="columns.length > 0" label="特征列：">
                    <a-checkbox-group
                      class="m_radiobox"
                      disabled
                      :value="checkedList"
                    >
                      <a-row>
                        <a-col
                          v-for="(item, index) in columns"
                          :key="index"
                          :span="4"
                          style="padding: 4px;"
                        >
                          <a-checkbox
                            :value="item.key"
                            class="radio text-ellipsis"
                            >{{ item.key }}</a-checkbox
                          >
                        </a-col>
                      </a-row>
                    </a-checkbox-group>
                  </a-form-item>
                  <a-form-item
                    v-if="
                      (modelData.algorithm === 'LR' ||
                        modelData.algorithm === 'DTC' ||
                        modelData.algorithm === 'AUTOR' ||
                        modelData.algorithm === 'AUTOC') &&
                      columns.length > 0
                    "
                    label="目标列"
                  >
                    <a-radio-group
                      v-model="dataFm.label_col"
                      disabled
                      class="m_radiobox"
                    >
                      <a-row>
                        <a-col
                          v-for="(item, index) in columns"
                          :key="index"
                          :span="4"
                          style="padding: 4px;"
                        >
                          <a-radio
                            :value="item.key"
                            class="radio text-ellipsis"
                            >{{ item.key }}</a-radio
                          >
                        </a-col>
                      </a-row>
                    </a-radio-group>
                  </a-form-item>
                  <div v-if="modelData.algorithm === 'LR'">
                    <a-form-item label="正则参数：">
                      <a-input-number
                        v-model="dataFm.reg_param"
                        style="width: 500px;"
                        disabled
                        default-value="0"
                        placeholder="请输入"
                        :min="0"
                        :max="1"
                        :step="0.1"
                      />
                    </a-form-item>
                    <a-form-item label="最大迭代数：">
                      <a-input-number
                        v-model="dataFm.max_iter"
                        disabled
                        style="width: 500px;"
                        placeholder="请输入"
                        default-value="5"
                        :min="0"
                        :max="20"
                      />
                    </a-form-item>
                  </div>
                  <div v-else-if="modelData.algorithm === 'DTC'">
                    <a-form-item label="拆分比例：">
                      训练集<a-input-number
                        v-model="dataFm.split_rate[0]"
                        disabled
                        style="margin: 0 10px; width: 80px;"
                        placeholder="请输入"
                        :min="0"
                        :max="1"
                        :step="0.05"
                        :precision="2"
                      />
                      测试集<a-input-number
                        v-model="dataFm.split_rate[1]"
                        disabled
                        style="margin: 0 10px; width: 80px;"
                        placeholder="请输入"
                        :min="0"
                        :max="1"
                        :step="0.05"
                        :precision="2"
                      />
                    </a-form-item>
                    <a-form-item label="树的最大深度：">
                      <a-input-number
                        v-model="dataFm.max_depth"
                        disabled
                        style="width: 500px;"
                        placeholder="请输入"
                        default-value="5"
                        :min="0"
                        :max="20"
                      />
                    </a-form-item>
                  </div>
                  <div v-else-if="modelData.algorithm === 'KM'">
                    <a-form-item label="聚类维度(k)：">
                      <a-input-number
                        v-model="dataFm.k"
                        disabled
                        style="width: 500px;"
                        placeholder="请输入"
                        default-value="2"
                        :min="2"
                        :max="20"
                      />
                    </a-form-item>
                    <a-form-item label="最大迭代数：">
                      <a-input-number
                        v-model="dataFm.max_iter"
                        disabled
                        style="width: 500px;"
                        placeholder="请输入"
                        default-value="20"
                        :min="0"
                        :max="20"
                      />
                    </a-form-item>
                    <a-form-item label="距离函数：">
                      <a-select
                        v-model="dataFm.model_type"
                        disabled
                        placeholder="请选择"
                        style="width: 500px;"
                      >
                        <a-select-option value="euclidean"
                          >euclidean</a-select-option
                        >
                        <a-select-option value="cosine">cosine</a-select-option>
                      </a-select>
                    </a-form-item>
                  </div>
                  <div v-else-if="modelData.algorithm === 'PCA'">
                    <a-form-item label="降维维度：">
                      <a-input-number
                        v-model="dataFm.k"
                        disabled
                        style="width: 500px;"
                        placeholder="请输入"
                        default-value="1"
                        :min="1"
                        :max="10"
                      />
                    </a-form-item>
                  </div>
                  <div v-else-if="modelData.algorithm === 'AUTOR'">
                    <a-form-item label="拆分比例：">
                      训练集
                      <a-input-number
                        v-model="dataFm.split_rate[0]"
                        disabled
                        style="margin: 0 10px; width: 80px;"
                      />
                      测试集
                      <a-input-number
                        v-model="dataFm.split_rate[1]"
                        disabled
                        style="margin: 0 10px; width: 80px;"
                      />
                    </a-form-item>
                    <a-form-item label="最大训练时长：">
                      <a-input-number
                        v-model="dataFm.timeout"
                        disabled
                        style="width: 500px;"
                      />
                      s
                    </a-form-item>
                    <a-form-item label="仅采纳以下模型：">
                      <div class="m_checkbox">
                        <a-checkbox style="padding-left: 4px;" disabled>
                          全选
                        </a-checkbox>
                        <a-checkbox-group
                          v-model="dataFm.include"
                          style="width: 100%;"
                          disabled
                        >
                          <a-row>
                            <a-col
                              v-for="(item, index) in regressionArray"
                              :key="'regression' + index"
                              :span="4"
                              style="padding: 4px;"
                            >
                              <a-checkbox
                                :value="item"
                                class="checkbox text-ellipsis"
                              >
                                {{ item }}
                              </a-checkbox>
                            </a-col>
                          </a-row>
                        </a-checkbox-group>
                      </div>
                    </a-form-item>
                  </div>
                  <div v-else-if="modelData.algorithm === 'AUTOC'">
                    <a-form-item label="拆分比例：">
                      训练集
                      <a-input-number
                        v-model="dataFm.split_rate[0]"
                        disabled
                        style="margin: 0 10px; width: 80px;"
                        placeholder="请输入"
                      />
                      测试集
                      <a-input-number
                        v-model="dataFm.split_rate[1]"
                        disabled
                        style="margin: 0 10px; width: 80px;"
                      />
                    </a-form-item>
                    <a-form-item label="最大训练时长：">
                      <a-input-number
                        v-model="dataFm.timeout"
                        disabled
                        style="width: 500px;"
                        placeholder="请输入"
                      />
                      s
                    </a-form-item>
                    <a-form-item label="仅采纳以下模型：">
                      <div class="m_checkbox">
                        <a-checkbox style="padding-left: 4px;" disabled>
                          全选
                        </a-checkbox>
                        <a-checkbox-group
                          v-model="dataFm.include"
                          style="width: 100%;"
                          disabled
                        >
                          <a-row>
                            <a-col
                              v-for="(item, index) in classificationArray"
                              :key="'regression' + index"
                              :span="4"
                              style="padding: 4px;"
                            >
                              <a-checkbox
                                :value="item"
                                class="checkbox text-ellipsis"
                              >
                                <a-tooltip>
                                  <template slot="title">{{ item }} </template>
                                  <div class="text-ellipsis">
                                    {{ item }}
                                  </div>
                                </a-tooltip>
                              </a-checkbox>
                            </a-col>
                          </a-row>
                        </a-checkbox-group>
                      </div>
                    </a-form-item>
                  </div>
                </a-form>
              </div>
            </div>
          </a-spin>
        </div>
      </div>
      <div v-else class="content">
        <a-form
          :form="dataFm"
          :label-col="{
            xs: { span: 24 },
            sm: { span: 3 },
          }"
          label-align="left"
        >
          <a-form-item v-if="columns.length > 0" label="特征列：">
            <a-checkbox-group class="m_radiobox" disabled :value="checkedList">
              <a-row>
                <a-col
                  v-for="(item, index) in columns"
                  :key="index"
                  :span="8"
                  style="padding: 4px;"
                >
                  <a-checkbox :value="item.key" class="radio text-ellipsis">{{
                    item.key
                  }}</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>
          <a-form-item
            v-if="
              (modelData.algorithm === 'LR' ||
                modelData.algorithm === 'DTC' ||
                modelData.algorithm === 'AUTOR' ||
                modelData.algorithm === 'AUTOC') &&
              columns.length > 0
            "
            label="目标列"
          >
            <a-radio-group
              v-model="dataFm.label_col"
              disabled
              class="m_radiobox"
            >
              <a-row>
                <a-col
                  v-for="(item, index) in columns"
                  :key="index"
                  :span="4"
                  style="padding: 4px;"
                >
                  <a-radio :value="item.key" class="radio text-ellipsis">{{
                    item.key
                  }}</a-radio>
                </a-col>
              </a-row>
            </a-radio-group>
          </a-form-item>
          <div v-if="modelData.algorithm === 'LR'">
            <a-form-item label="正则参数：">
              <a-input-number
                v-model="dataFm.reg_param"
                style="width: 500px;"
                disabled
                default-value="0"
                placeholder="请输入"
                :min="0"
                :max="1"
                :step="0.1"
              />
            </a-form-item>
            <a-form-item label="最大迭代数：">
              <a-input-number
                v-model="dataFm.max_iter"
                disabled
                style="width: 500px;"
                placeholder="请输入"
                default-value="5"
                :min="0"
                :max="20"
              />
            </a-form-item>
          </div>
          <div v-else-if="modelData.algorithm === 'DTC'">
            <a-form-item label="拆分比例：">
              训练集<a-input-number
                v-model="dataFm.split_rate[0]"
                disabled
                style="margin: 0 10px; width: 80px;"
                placeholder="请输入"
                :min="0"
                :max="1"
                :step="0.05"
                :precision="2"
              />
              测试集<a-input-number
                v-model="dataFm.split_rate[1]"
                disabled
                style="margin: 0 10px; width: 80px;"
                placeholder="请输入"
                :min="0"
                :max="1"
                :step="0.05"
                :precision="2"
              />
            </a-form-item>
            <a-form-item label="树的最大深度：">
              <a-input-number
                v-model="dataFm.max_depth"
                disabled
                style="width: 150px;"
                placeholder="请输入"
                default-value="5"
                :min="0"
                :max="20"
              />
            </a-form-item>
          </div>
          <div v-else-if="modelData.algorithm === 'KM'">
            <a-form-item label="聚类维度(k)：">
              <a-input-number
                v-model="dataFm.k"
                disabled
                style="width: 500px;"
                placeholder="请输入"
                default-value="2"
                :min="2"
                :max="20"
              />
            </a-form-item>
            <a-form-item label="最大迭代数：">
              <a-input-number
                v-model="dataFm.max_iter"
                disabled
                style="width: 500px;"
                placeholder="请输入"
                default-value="20"
                :min="0"
                :max="20"
              />
            </a-form-item>
            <a-form-item label="距离函数：">
              <a-select
                v-model="dataFm.model_type"
                disabled
                placeholder="请选择"
                style="width: 500px;"
              >
                <a-select-option value="euclidean">euclidean</a-select-option>
                <a-select-option value="cosine">cosine</a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <div v-else-if="modelData.algorithm === 'PCA'">
            <a-form-item label="降维维度：">
              <a-input-number
                v-model="dataFm.k"
                disabled
                style="width: 500px;"
                placeholder="请输入"
                default-value="1"
                :min="1"
                :max="10"
              />
            </a-form-item>
          </div>
          <div v-else-if="modelData.algorithm === 'AUTOR'">
            <a-form-item label="拆分比例：">
              训练集
              <a-input-number
                v-model="dataFm.split_rate[0]"
                disabled
                style="margin: 0 10px; width: 80px;"
              />
              测试集
              <a-input-number
                v-model="dataFm.split_rate[1]"
                disabled
                style="margin: 0 10px; width: 80px;"
              />
            </a-form-item>
            <a-form-item label="最大训练时长：">
              <a-input-number
                v-model="dataFm.timeout"
                disabled
                style="width: 500px;"
              />
              s
            </a-form-item>
            <a-form-item label="仅采纳以下模型：">
              <div class="m_checkbox">
                <a-checkbox style="padding-left: 4px;" disabled>
                  全选
                </a-checkbox>
                <a-checkbox-group
                  v-model="dataFm.include"
                  style="width: 100%;"
                  disabled
                >
                  <a-row>
                    <a-col
                      v-for="(item, index) in regressionArray"
                      :key="'regression' + index"
                      :span="4"
                      style="padding: 4px;"
                    >
                      <a-checkbox :value="item" class="checkbox text-ellipsis">
                        {{ item }}
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </div>
            </a-form-item>
          </div>
          <div v-else-if="modelData.algorithm === 'AUTOC'">
            <a-form-item label="拆分比例：">
              训练集
              <a-input-number
                v-model="dataFm.split_rate[0]"
                disabled
                style="margin: 0 10px; width: 80px;"
                placeholder="请输入"
              />
              测试集
              <a-input-number
                v-model="dataFm.split_rate[1]"
                disabled
                style="margin: 0 10px; width: 80px;"
              />
            </a-form-item>
            <a-form-item label="最大训练时长：">
              <a-input-number
                v-model="dataFm.timeout"
                disabled
                style="width: 500px;"
                placeholder="请输入"
              />
              s
            </a-form-item>
            <a-form-item label="仅采纳以下模型：">
              <div class="m_checkbox">
                <a-checkbox style="padding-left: 4px;" disabled>
                  全选
                </a-checkbox>
                <a-checkbox-group
                  v-model="dataFm.include"
                  style="width: 100%;"
                  disabled
                >
                  <a-row>
                    <a-col
                      v-for="(item, index) in classificationArray"
                      :key="'regression' + index"
                      :span="4"
                      style="padding: 4px;"
                    >
                      <a-checkbox :value="item" class="checkbox text-ellipsis">
                        <a-tooltip>
                          <template slot="title">{{ item }} </template>
                          <div class="text-ellipsis">
                            {{ item }}
                          </div>
                        </a-tooltip>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </div>
            </a-form-item>
          </div>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { queryModelById, querySource } from '@/api/model'
import DatasetPreviewTable from '@/components/data/DatasetPreviewTable.vue'

@Component({
  components: { DatasetPreviewTable },
})
export default class ModelConfig extends Vue {
  @Prop({ type: Number, default: null }) propId!: number
  @Prop({ type: Boolean, default: false }) simpleMode!: boolean
  private projectId: number = 0 // 项目 Id
  public loading: boolean = false
  public modelId: number = 0
  public tableData: any = {}
  public columns: any = []
  public heads: any = []
  public souceData: any = []
  public modelData: any = {}
  public dataFm: any = {}
  public checkedList: any = []
  private minLength = document.body.clientWidth - 200
  public labelCol = {
    xs: { span: 24 },
    sm: { span: 2 },
  }
  public wrapperCol = {
    xs: { span: 24 },
    sm: { span: 18 },
  }
  public regressionArray: any = [
    'adaboost',
    'ard_regression',
    'decision_tree',
    'extra_trees',
    'gaussian_process',
    'gradient_boosting',
    'k_nearest_neighbors',
    'liblinear_svr',
    'libsvm_svr',
    'mlp',
    'random_forest',
    'sgd',
  ]
  public classificationArray: any = [
    'adaboost',
    'bernoulli_nb',
    'decision_tree',
    'extra_trees',
    'gaussian_nb',
    'gradient_boosting',
    'k_nearest_neighbors',
    'lda',
    'liblinear_svc',
    'libsvm_svc',
    'mlp',
    'multinomial_nb',
    'passive_aggressive',
    'qda',
    'random_forest',
    'sgd',
  ]

  public get breadType() {
    return this.$route.query.type
  }

  public get createUrl() {
    return `${this.$route.path.replace(/config/, 'create')}?id=${this.modelId}`
  }

  public created() {
    this.projectId = Number(this.$route.params.id)
    this.modelId = Number(this.$route.query.id ?? this.propId)
    this.queryModelById()
  }

  public async queryModelById() {
    this.loading = true
    await queryModelById({
      // data: { projectId: 792,id:2,data:{} },
      data: { projectId: this.projectId, id: this.modelId, data: {} },
    })
      .then(async (response: any) => {
        if (response.data.code === 100) {
          this.modelData = response.data.result
          this.checkedList = this.modelData.param?.feature_col ?? []
          this.querySourceTable(this.modelData.sourceId)
          switch (this.modelData.algorithm) {
            case 'LR': {
              if (this.modelData.param?.label_col) {
                this.dataFm.label_col = this.modelData.param?.label_col
              }
              // this.dataFm.label_col = this.modelData?.param?.label_col ?? undefined
              this.dataFm.max_iter = this.modelData.param?.max_iter ?? 20
              this.dataFm.reg_param = this.modelData.param?.reg_param ?? 0
              break
            }
            case 'DTC': {
              this.dataFm.max_depth = this.modelData.param?.max_depth ?? 5
              // this.dataFm.label_col = this.modelData?.param?.label_col ?? ''
              if (this.modelData.param?.label_col) {
                this.dataFm.label_col = this.modelData.param?.label_col
              }
              this.dataFm.split_rate = this.modelData.param.split_rate ?? [
                '',
                '',
              ]
              break
            }
            case 'KM': {
              this.dataFm.k = this.modelData.param?.k ?? 2
              this.dataFm.max_iter = this.modelData.param?.max_iter ?? 20
              this.dataFm.model_type =
                this.modelData.param?.model_type ?? 'euclidean'
              break
            }
            case 'PCA': {
              this.dataFm.k = this.modelData.param?.k ?? 1
              break
            }
            case 'AUTOR': {
              this.dataFm.label_col = this.modelData.param?.label_col
              this.dataFm.split_rate = this.modelData.param.split_rate ?? [
                '',
                '',
              ]
              this.dataFm.timeout = this.modelData.param?.timeout
              this.dataFm.include = this.modelData.param?.include
              break
            }
            case 'AUTOC': {
              this.dataFm.label_col = this.modelData.param?.label_col
              this.dataFm.split_rate = this.modelData.param.split_rate ?? [
                '',
                '',
              ]
              this.dataFm.timeout = this.modelData.param?.timeout
              this.dataFm.include = this.modelData.param?.include
              break
            }
            default:
              break
          }
        }
      })
      .catch(() => {
        this.loading = false
      })
  }

  public async querySourceTable(sourceId: any) {
    const response = await querySource({
      data: { datasetId: sourceId, projectId: this.projectId },
    })
    this.loading = false
    if (response.data.code === 100) {
      this.tableData = response.data?.result
      this.columns = []
      response.data?.result?.head.forEach((element: any) => {
        this.columns.push({
          title: element.name,
          key: element.name,
          dataIndex: element.name,
          slots: { title: 'customTitle' },
          width: this.minLength / response.data?.result?.head.length,
          ellipsis: true,
        })
      })
      this.heads = response.data?.result?.head // this.getColumns(response.data?.result?.head)
      this.souceData = response.data?.result?.data
    }
  }

  public backList() {
    this.$router.push(this.$route.path.replace(/config/, 'trainning'))
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/model';

.normal {
  background-color: #fafafa;
  height: calc(100vh - @HEADER_HEIGHT - @MODEL_TITLE_HEIGHT);
  padding: 16px 24px;
}

.simpleMode {
  background-color: #fff;
  height: 100%;
  padding: 0 12px;
}

.main-content {
  // height: calc(100% - 57px);
  background: #fff;

  .space {
    padding: 24px 216px;
  }

  .space1 {
    padding: 24px 0;
  }

  .steps-content {
    margin-top: 16px;
    min-height: 200px;
    padding-top: 39px;
  }

  .steps-action {
    margin-top: 24px;

    .btn-left {
      margin-left: 8px;
    }

    .btn-center {
      display: flex;
      justify-content: center;
    }
  }

  .settings {
    padding: 0 40px;

    .content {
      margin-bottom: 25px;
      padding: 0 12px;

      b {
        font-size: 16px;
        line-height: 40px;
      }
    }
  }

  .trainning {
    margin-top: -31px;
    padding: 0 24px;

    .title {
      font-size: 16px;
      margin-bottom: 20px;
    }

    .row {
      padding: 4px 0;
    }

    .radio {
      margin-top: 28px;
    }

    .empty-img {
      padding: 160px 0;
    }

    .content {
      padding: 24px 0 0;

      .result {
        display: flex;
        height: 222px;
        margin-bottom: 22px;
      }
    }
  }
}

// .m_checkbox {
//   background-color: #fafafa;
//   border-radius: 4px;
//   padding-left: 12px;
//   white-space: nowrap;
//   width: 100%;

//   .checkbox {
//     white-space: nowrap;
//     width: 100%;
//   }
// }

// .m_radiobox {
//   background-color: #fafafa;
//   border-radius: 4px;
//   padding: 8px;
//   width: 100%;

//   .radio {
//     width: 100%;
//   }
// }

// .m_title {
//   align-items: center;
//   display: flex;
//   margin-bottom: 22px;

//   b {
//     font-size: 16px;
//   }
// }

// .divider {
//   background-color: #6973ff;
//   height: 18px;
//   margin-right: 8px;
//   width: 4px;
// }

// .divider2 {
//   background-color: rgba(93, 99, 126, 0.45);
//   height: 18px;
//   margin-right: 8px;
//   width: 1px;
// }

// .text-ellipsis {
//   display: inline-block;
//   max-width: 100%;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   vertical-align: bottom;
//   white-space: nowrap;
// }
</style>
